<template>
  <el-card :body-style="{
    paddingTop: '12px',
  }">
    <div class="container" ref="target"></div>
  </el-card>
</template>
    
    
<script   setup>
import echarts from "echarts";
import { defineProps, ref, onMounted } from "vue";
const target = ref(null);
var data = ref([
  { timeStr: "2022-02-12", income: "55.5", expense: "6.1" },
  { timeStr: "2022-02-13", income: "46.5", expense: "3.1" },
  { timeStr: "2022-02-14", income: "37.5", expense: "5.1" },
  { timeStr: "2022-02-15", income: "51.5", expense: "9.1" },
  { timeStr: "2022-02-16", income: "32.5", expense: "1.1" },
  { timeStr: "2022-02-17", income: "49.5", expense: "7.1" },
  { timeStr: "2022-02-18", income: "52.5", expense: "1.1" },
  { timeStr: "2022-02-19", income: "63.5", expense: "2.1" },
  { timeStr: "2022-02-20", income: "31.5", expense: "1.1" },
  { timeStr: "2022-02-21", income: "63.5", expense: "4.1" },
  { timeStr: "2022-02-22", income: "66.5", expense: "6.1" },
  { timeStr: "2022-02-23", income: "74.5", expense: "7.1" },
  { timeStr: "2022-02-24", income: "41.5", expense: "3.1" },
  { timeStr: "2022-02-25", income: "32.5", expense: "2.1" },
  { timeStr: "2022-02-26", income: "33.5", expense: "7.1" },
  { timeStr: "2022-02-27", income: "21.5", expense: "4.1" },
  { timeStr: "2022-02-28", income: "12.5", expense: "2.1" },
  { timeStr: "2022-02-29", income: "62.5", expense: "9.1" },
  { timeStr: "2022-02-30", income: "41.5", expense: "3.1" },
]);
let mChart;

onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart(); // 渲染函数
});

const renderChart = () => {
  const options = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["收益", "支出"],
      right: 0,
    },
    grid: {
      top: 20,
      right: 0,
      bottom: 0,
      left: 0,
      // 计算边距时，包含标签 考虑到标签的完整显示 如果不这样就会以主图为主
      containLabel: true,
    },
    xAxis: {
      //因为 图形要从y轴走出来 所以x轴不打C位
      type: "value",
    },
    // 高亮配置
    emphasis: {
      // 聚焦当前高亮的数据所在的系列的所有图形
      focus: "series",
    },
    yAxis: [
      {
        type: "category",
        axisTick: {
          show: false,
        },
        data: data.value.map((item) => item.timeStr),
        inverse: true, //反向展示
      },
    ],
    series: [
      {
        name: "收益", //第一个柱状图
        type: "bar",
        stack: "Total", //两张图stack一样会发生堆叠
        label: {
          show: true,
          //   position: "middle",
        },

        // 柱的颜色
        color: "#8BC34A",
        data: data.value.map((item) => item.income),
      },
      {
        name: "支出",
        type: "bar",
        stack: "Total", //两张图stack一样会发生堆叠
        color: "#2196F3",
        label: {
          show: true,
          position: "right",
        },
        data: data.value.map((item) => item.expense),
      },
    ],
  };

  mChart.setOption(options);
};
</script>
    
    
<style lang='scss' scoped>
.container {
  height: 443px;
  //   background-color: #bcbfc3;
}
</style>